/*
 * @Author: 肖思汗 
 * @Date: 2025-06-27 18:15:24 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-09-03 16:38:49
 */
import { Divider, Input } from '@nutui/nutui-react-taro';
import { Image, Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { toJS } from 'mobx';
import { observer } from "mobx-react-lite";
import { useEffect } from 'react';
import { useState } from 'react';
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import PageLayer from 'src/components/PageLayer/PageLayer';
import utils from 'src/utils/utils';
import profilePictureSVG from "./profilePicture.svg";
import profilePicture2SVG from "./profilePicture2.svg";
import styles from './promoteRelationships.module.less'; // 修改为模块化样式
import promoteRelationshipsStore from './promoteRelationshipsStore';
import logoSVG from "src/static/UTlogo.svg";
import utilsStore from 'src/utils/utilsStore';
import MyScrollView from 'src/components/MyScrollView/MyScrollView';
import clsx from 'clsx';

// 推广关系
const PromoteRelationships = observer(() => {

    // 父级推广人信息
    const firstParentInfo = toJS(promoteRelationshipsStore.firstParentInfo);

    // 推广关系列表
    const relationsList = toJS(promoteRelationshipsStore.relationsList);

    useEffect(() => {
        promoteRelationshipsStore.getFirstParentInfo();
        promoteRelationshipsStore.getNextRelations(true);
    }, []);

    console.log("PromoteRelationships render");

    const [isEditingRemark, setIsEditingRemark] = useState(false);
    const [editingRemarkValue, setEditingRemarkValue] = useState('');
    const [editingRemarkId, setEditingRemarkId] = useState(0);

    const handleUpdateRemarkName = (openId: string, newName: string) => {
        promoteRelationshipsStore.updateRemarkName(openId, newName);
    };

    return (
        <PageLayer
            showBack
            title='推广关系'
            className={styles.promoteRelationships}
        >

            {firstParentInfo && (
                <View className={styles.card}>
                    <View className={styles.cardTitle}>
                        <Image
                            mode="aspectFill"
                            className={styles.profilePicture}
                            src={profilePictureSVG}
                        />
                        <Text className={styles.cardTitleText} >我的绑定关系</Text>
                    </View>
                    <View className={styles.cardContent}>
                        <View className={styles.infoRow}>
                            <Image
                                className={styles.avatar}
                                src={firstParentInfo.profilePicture ? utils.ossSuffix(firstParentInfo.profilePicture) : logoSVG}
                                mode="aspectFill"
                            />
                            <View className={styles.infoFields}>
                                <Text className={styles.infoText}>{firstParentInfo.remarkName || firstParentInfo.userName || '--'}</Text>
                                <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{`ID: ${firstParentInfo.id || '--'}`}</Text>
                                <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{firstParentInfo.phoneNumber || '--'}</Text>
                                <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{firstParentInfo.linkTime || '--'}</Text>
                            </View>
                        </View>
                    </View>
                </View>
            )}

            <View className={styles.card}>

                <View className={styles.cardTitle}>
                    <Image
                        mode="aspectFill"
                        className={styles.profilePicture}
                        src={profilePicture2SVG}
                    />
                    <Text className={styles.cardTitleText} >我的推广关系</Text>
                </View>

                {
                    relationsList.length > 0 &&
                    <MyScrollView
                        className={styles.cardContent}
                        style={{
                            height: utilsStore.containerHeight - (firstParentInfo ? utils.rpx2px(580) : utils.rpx2px(230)),
                        }}
                        onScrollBottom={() => {
                            promoteRelationshipsStore.getNextRelations(false);
                        }}
                    >
                        {
                            relationsList.map((promotionData, index) => {
                                return (
                                    <View className={styles.infoRow} key={promotionData.id} >
                                        <Image
                                            className={styles.avatar}
                                            src={promotionData.profilePicture ? utils.ossSuffix(promotionData.profilePicture) : logoSVG}
                                            mode="aspectFill"
                                        />
                                        <View className={styles.infoFields}>
                                            {promotionData.id === editingRemarkId ? (
                                                <Input
                                                    className={styles.editInput}
                                                    defaultValue={promotionData.remarkName || promotionData.userName || ''}
                                                    placeholder='请输入备注'
                                                    onBlur={(value: string) => {
                                                        handleUpdateRemarkName(promotionData.openId, value);
                                                        setEditingRemarkId(0);
                                                    }}
                                                    autoFocus
                                                />
                                            ) : (
                                                <View>
                                                    <Text className={styles.infoText}>{promotionData.remarkName || promotionData.userName || '--'}</Text>
                                                    &nbsp;&nbsp;
                                                    <Text
                                                        className={styles.modifyRemark}
                                                        onClick={() => {
                                                            setEditingRemarkValue(promotionData.remarkName || promotionData.userName || '');
                                                            setEditingRemarkId(promotionData.id);
                                                        }}
                                                    >
                                                        修改
                                                    </Text>
                                                </View>
                                            )}
                                            {/* <Text className={styles.infoText}>{promotionData.remarkName || promotionData.userName || '--'}</Text> */}
                                            <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{`ID: ${promotionData.id || '--'}`}</Text>
                                            <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{promotionData.phoneNumber || '--'}</Text>
                                            <Text className={clsx(styles.infoText, styles.block, styles.sub)}>{promotionData.linkTime || '--'}</Text>
                                        </View>
                                    </View>
                                );
                            })
                        }
                    </MyScrollView>
                }

                {
                    relationsList.length === 0 &&
                    <MyEmpty
                        description="暂无推广关系"
                        actions={[
                            {
                                text: '去推广',
                                onClick: () => {
                                    Taro.navigateBack();
                                }
                            }
                        ]}
                    />

                }
            </View>

            <Divider
                style={{
                    borderStyle: 'solid',
                    width: '80%',
                    margin: '0 auto',
                }}
            >
                邀请更多好友一起加入吧
            </Divider>

            {/* {relationsList.map((item) => {
                return <View key={item.id}></View>;
            })} */}

        </PageLayer>
    );
});

export default PromoteRelationships;


